<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">sOffice-Tạo mới phòng ban</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{deptBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!deptBean.conversation.isTransient()}"/>

            <p:dialog header="Info" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Session for this page is timeout" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:metadata>
            <f:event type="preRenderView" listener="#{deptBean.preNewAction()}" />
        </f:metadata>
        <!-- Tab Menu -->
        <ui:include src="/templates/tabmenu.xhtml">
            <ui:param name="tabIndex" value="5"/>
        </ui:include>
        
        <p:outputPanel>
            <p:layout style="height: 100%;">
                <p:layoutUnit position="west" resizable="true" minSize="210">  
                    <ui:include src="/admin/leftmenu.xhtml"/>
                </p:layoutUnit>
                
                <p:layoutUnit position="center">
                    <h:form id="mainForm">
                        <p:panel header="Tạo mới phòng ban">
                            <p:messages id="msgs"/>
                            <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                                <p:toolbarGroup align="left">  
                                    <p:commandButton value="Lưu" action="#{deptBean.saveAction()}" update="mainForm"/>
                                    <p:commandButton value="Huỷ" action="#{deptBean.cancelAction()}" immediate="true"/>
                                    <p:commandButton type="reset" value="Nhập lại"/>
                                </p:toolbarGroup>
                            </p:toolbar>

                            <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                                         columns="2" cellpadding="5" width="100%">
                                <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên *" />  
                                <p:inputText value="#{deptBean.dept.name}" id="name" required="true" label="Tên" maxlength="50"
                                             requiredMessage="Yêu cầu nhập tên phòng ban"/>

                                <h:outputLabel for="code" style="display: inline; float: right; padding-right: 5px;" value="Mã *" />  
                                <p:inputText value="#{deptBean.dept.code}" id="code" required="true" label="Mã" maxlength="10"
                                             requiredMessage="Yêu cầu nhập mã phòng ban"/>

                                <h:outputLabel for="phone" style="display: inline; float: right; padding-right: 5px;" value="Điện thoại" />  
                                <p:inputText value="#{deptBean.dept.phone}" id="phone" label="Điện thoại" maxlength="20"/>

                                <h:outputLabel for="fax" style="display: inline; float: right; padding-right: 5px;" value="Fax" />  
                                <p:inputText value="#{deptBean.dept.fax}" id="fax" label="Fax" maxlength="20"/>

                                <h:outputLabel for="address" style="display: inline; float: right; padding-right: 5px;" value="Địa chỉ" />
                                <h:panelGroup>
                                    <p:inputTextarea id="address" counter="counter" counterTemplate="Còn lại {0} ký tự." maxlength="200" 
                                                     value="#{deptBean.dept.address}"/>
                                    <h:outputText id="counter" />
                                </h:panelGroup>
                            </h:panelGrid>

                            <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                                <p:toolbarGroup align="left">  
                                    <p:commandButton value="Lưu" action="#{deptBean.saveAction()}" update="mainForm"/>
                                    <p:commandButton value="Huỷ" action="#{deptBean.cancelAction()}" immediate="true"/>
                                    <p:commandButton type="reset" value="Nhập lại"/>
                                </p:toolbarGroup>
                            </p:toolbar>
                        </p:panel>
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </p:outputPanel>
    </ui:define>
</ui:composition>